<template>
  <div>
    <div class="gva-table-box">
      <div class="gva-btn-list">
        <el-button type="primary" icon="plus" @click="openDialog">新增 源数据库</el-button>
      </div>
      <el-table
        ref="multipleTable"
        style="width: 100%"
        tooltip-effect="dark"
        :data="tableData"
        row-key="ID"
        size="small"
        border
        :cell-style="{padding:'0px'}"
        :header-cell-style="{background:'#a3c6d2',color:'#849ba1',padding:'0px'}"
        @selection-change="handleSelectionChange"
      >
        <el-table-column align="left" label="类型" prop="dbType" :show-overflow-tooltip="true" />
        <el-table-column align="left" label="ip" prop="dbIp" :show-overflow-tooltip="true" />
        <el-table-column align="left" label="端口" prop="dbPort" :show-overflow-tooltip="true" />
        <el-table-column align="left" label="用户名" prop="dbUser" :show-overflow-tooltip="true" />
        <el-table-column align="left" label="数据库名" prop="dbName" :show-overflow-tooltip="true" />
        <el-table-column align="left" label="实时同步" prop="rtUser" :show-overflow-tooltip="true" />
        <el-table-column align="left" label="数据库状态" prop="dbState" :show-overflow-tooltip="true">
          <template #default="scope">{{ getDbState(scope.row.dbState) }}</template>
        </el-table-column>
        <el-table-column align="left" label="数据库主题" prop="dbTopic" :show-overflow-tooltip="true" />
        <el-table-column align="left" label="提供人" prop="supplierId">
          <template #default="scope">{{ getSupplierById(scope.row.supplierId) }}</template>
        </el-table-column>
        <el-table-column align="left" label="操作系统" prop="os" :show-overflow-tooltip="true" />
        <el-table-column align="left" label="备注" prop="remarks" :show-overflow-tooltip="true" />
        <el-table-column align="left" label="操作" width="150">
          <template #default="scope">
            <el-button type="primary" link icon="edit" class="table-button" @click="updateOdsOdbFunc(scope.row)">变更</el-button>
            <el-button type="primary" link icon="delete" @click="deleteRow(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="page"
          :page-size="pageSize"
          :page-sizes="[10, 30, 50, 100]"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
    <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" title="配置源数据库信息" class="dialog-mid">
      <el-form
        ref="elFormRef"
        class="x-form"
        :inline="true"
        :rules="rule"
        :model="formData"
        label-position="right"
      >
        <el-form-item label="数据库类型:" prop="dbType">
          <el-select v-model="formData.dbType" style="width:600px">
            <el-option v-for="item in odsDbType" :key="item.id" :value="item.label" :label="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="数据库ip:" prop="dbIp">
          <el-input v-model="formData.dbIp" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="数据库端口:" prop="dbPort">
          <el-input v-model="formData.dbPort" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="数据库用户名:" prop="dbUser">
          <el-input v-model="formData.dbUser" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="数据库密码:" prop="dbPassword">
          <el-input v-model="formData.dbPassword" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="数据库名:" prop="dbName">
          <el-input v-model="formData.dbName" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="实时同步用户名:" prop="rtUser">
          <el-input v-model="formData.rtUser" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="实时同步密码:" prop="rtPassword">
          <el-input v-model="formData.rtPassword" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="数据库状态:" prop="dbState">
          <el-input v-model.number="formData.dbState" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="数据库主题:" prop="dbTopic">
          <el-input v-model="formData.dbTopic" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="url参数:" prop="dbParm">
          <el-input v-model="formData.dbParm" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="操作系统:" prop="os">
          <el-input v-model="formData.os" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="备注:" prop="remarks">
          <el-input v-model="formData.remarks" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="提供人:" prop="supplierId">
          <el-select v-model="formData.supplierId" style="width:600px">
            <el-option v-for="item in suppliers" :key="item.id" :value="item.ID" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="数据库版本:" prop="version">
          <el-input v-model="formData.version" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="warning" style="float: left" @click="testDbUrl">测试连接</el-button>
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="enterDialog">保 存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'OdsOdb'
}
</script>

<script setup>
import {
  createOdsOdb,
  deleteOdsOdb,
  updateOdsOdb,
  findOdsOdb,
  getOdsOdbList,
  testOdsOdb
} from '@/api/odsOdb'

import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, reactive } from 'vue'

const formData = ref({
  dbType: '',
  dbIp: '',
  dbName: '',
  dbParm: '',
  dbPassword: '',
  dbPort: '',
  ipDb: '',
  dbPrefix: '',
  dbState: 0,
  dbTopic: '',
  dbUrl: '',
  dbUser: '',
  os: '',
  remarks: '',
  supplierId: 0,
  supplier: '',
  tbPrefix: '',
  version: '',
})

const rule = reactive({
  dbType: [
    {
      required: true,
      message: '请选择源数据库类型',
      trigger: 'blur'
    }
  ],
  dbIp: [
    {
      required: true,
      message: '请输入源数据库ip',
      trigger: 'blur'
    }
  ],
  dbPort: [
    {
      required: true,
      message: '请输入源数据库port',
      trigger: 'blur'
    }
  ],
  dbUser: [
    {
      required: true,
      message: '请输入源数据库用户名',
      trigger: 'blur'
    }
  ],
  dbPassword: [
    {
      required: true,
      message: '请输入源数据库密码',
      trigger: 'blur'
    }
  ],
  dbName: [
    {
      required: true,
      message: '请输入源数据库名称',
      trigger: 'blur'
    }
  ],
  supplierId: [
    {
      required: true,
      message: '请选择提供人',
      trigger: 'blur'
    }
  ],
})

const elFormRef = ref()
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const tableData = ref([])
const searchInfo = ref({})
const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
}

const handleCurrentChange = (val) => {
  page.value = val
  getTableData()
}

const getTableData = async() => {
  const res = await getOdsOdbList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
  if (res.code === 0) {
    tableData.value = res.data.list
    total.value = res.data.total
    page.value = res.data.page
    pageSize.value = res.data.pageSize
  }
}

getTableData()


const setOptions = async() => {
}

setOptions()

const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

const deleteRow = (row) => {
  ElMessageBox.confirm('确定要删除吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteOdsOdbFunc(row)
  })
}



const type = ref('')

const updateOdsOdbFunc = async(row) => {
  const res = await findOdsOdb({ ID: row.ID })
  type.value = 'update'
  if (res.code === 0) {
    formData.value = res.data.reodsOdb
    dialogFormVisible.value = true
  }
}

const deleteOdsOdbFunc = async(row) => {
  const res = await deleteOdsOdb({ ID: row.ID })
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '删除成功'
    })
    if (tableData.value.length === 1 && page.value > 1) {
      page.value--
    }
    await getTableData()
  }
}

const dialogFormVisible = ref(false)

const openDialog = () => {
  type.value = 'create'
  dialogFormVisible.value = true
}

const closeDialog = () => {
  dialogFormVisible.value = false
  formData.value = {
    dbIp: '',
    dbName: '',
    dbParm: '',
    dbPassword: '',
    dbPort: '',
    ipDb: '',
    dbPrefix: '',
    dbState: 0,
    dbTopic: '',
    dbUrl: '',
    dbUser: '',
    os: '',
    remarks: '',
    supplierId: 0,
    supplier: '',
    tbPrefix: '',
    type: '',
    version: '',
  }
}
const enterDialog = async() => {
  elFormRef.value?.validate(async(valid) => {
    if (!valid) return
    let res
    switch (type.value) {
      case 'create':
        res = await createOdsOdb(formData.value)
        break
      case 'update':
        res = await updateOdsOdb(formData.value)
        break
      default:
        res = await createOdsOdb(formData.value)
        break
    }
    if (res.code === 0) {
      ElMessage({
        type: 'success',
        message: '创建/更改成功'
      })
      closeDialog()
      getTableData()
    }
  })
}

import { getDict } from '@/utils/dictionary'
const odsDbType = ref([])
const getOdsDbType = async() => {
  odsDbType.value = await getDict('odsDbType')
}

const testDbUrlBtn = ref('测试连接')
const urlState = ref('')
const testDbUrl = async() => {
  elFormRef.value?.validate(async(valid) => {
    if (!valid) return
    const res = await testOdsOdb(formData.value)
    if (res.code === 0) {
      urlState.value = '数据库连接成功'
      testDbUrlBtn.value = '数据库连接成功'
      formData.value.dbState = 1
      ElMessage('数据库连接成功')
    } else {
      urlState.value = '数据库连接失败'
      testDbUrlBtn.value = '数据库连接失败'
      formData.value.dbState = 0
      ElMessage('数据库连接失败')
    }
  })
}
const suppliers = ref([])
import { getAllOdsSuppliers } from '@/api/odsSupplier'
const getSuppliers = async() => {
  const res = await getAllOdsSuppliers()
  if (res.code === 0) {
    suppliers.value = res.data.odsSupplier
  }
}
const getSupplierById = (id) => {
  for (let i = 0; i < suppliers.value.length; i++) {
    if (suppliers.value[i].ID === id) {
      return (suppliers.value[i].name)
    }
  }
}
const getDbState = (id) => {
  switch (id) {
    case 0:
      return '未连接'
    case 1:
      return '连接正常'
  }
}

const init = () => {
  getSuppliers()
  getOdsDbType()
}
init()

</script>

<style lang="scss">
.el-table__body tr.current-row>td {
  background: #c4f3c6 !important;
}
:deep.el-input.el-input--default.el-input--suffix {
  width: 200px !important;
}
</style>
